<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>回收站</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="css/layui-theme-custom.css"/>
    <link rel="stylesheet" href="css/mytest.css"/>
    <link rel="stylesheet" href="css/note_list.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>

<body>
<div class="body_left">
	<div class="right_top">
		<i class="iconfont icon-fanhui"
		   style="font-size: 34px ;line-height: 56px;float: left; margin-left: 20px; color: #DFE2E8;"></i>
		<div class="search layui-btn-radius">
			<i class="iconfont icon-sousuo" style="float: left;margin-left: 5px;color: #DFE2E8;"></i>
			<input type="text" name="title" required lay-verify="required" placeholder="搜索..." autocomplete="off"
				   class="searchinput">
		</div>
		<i class="iconfont icon-icon-" style="float: right; margin-right: 20px;color: #DFE2E8;"></i>
	</div>
<ul id="notes">
    <li class="li" v-for="(note,index) in info.data" :id="forId(index)"
        onmouseover="this.style.backgroundColor='#F6F7F9'" onmouseout="this.style.backgroundColor='white'">
        <div class="welcome">
            <div class="test" :id="forDivId(index)" hidden="hidden">
                <ul>
                    <li>{{note.id}}</li>
                    <li>加星</li>
                    <li>置顶</li>
                    <li>复制</li>
                    <li>删除</li>
                </ul>
            </div>

            <div class="noteid" hidden="hidden">{{note.id}}</div>

            <div style="height: 20px;"></div>
            <div class="Ntop"><img class="noteimg" :src="note.icon" width="16px" height="16px"/><span class="Ntitle">{{note.notesName}}</span>
                <div class="noteType" hidden="hidden">{{note.type}}</div>
                <span class="images">
								<a href="#">
								<img src="img/recovery1.png" :id="forImgId(index)"
                                     onMouseOver="this.src='img/recovery2.png'"
                                     onMouseOut="this.src='img/recovery1.png'" height="19px" width="19px"
                                     class="recovery"/>
								</a>
								<a href="#">
								<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'"
                                     onMouseOut="this.src='img/delete1.png'" height="21px" width="21px" class="delete"/>
								</a>	
						</span>
            </div>
            <div class="content" v-if="note.content!=null">{{note.content}}</div>
            <div class="Nbottom"><span>{{note.updateTime}}</span><span class="kb">{{note.size}}KB</span></div>
        </div>
    </li>
</ul>
</div>
<script>
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.$;
        var layer = layui.layer;

        var toggle = 0;


        /*点击事件*/
        $('body').on('click', '#notes .li', function (e) {
            transfer(e.currentTarget);
        });

        function transfer(a) {
            $('#notes .li').css("background-color", "#fff");
            $('#notes .li').attr("onmouseover", "this.style.backgroundColor='#F6F7F9'");
            $('#notes .li').attr("onmouseout", "this.style.backgroundColor='white'");
            if (toggle == 0) {
                $(a).removeAttr("onmouseover");
                $(a).removeAttr("onmouseout");
                $(a).css("background-color", "#EAF0FB");
                toggle = 1;
            } else {
                $(a).removeAttr("onmouseover");
                $(a).removeAttr("onmouseout");
                $(a).css("background-color", "#EAF0FB");
            }
        }


        /*点击事件*/
        $('body').on('click', '.welcome', function (e) {
            var noteName = $(this).find('.Ntitle').text();
            var content = $(this).find('.content').text();
            sessionStorage.setItem('noteName', noteName);//传值到recyle-area.html
            sessionStorage.setItem('content', content);
            $('.body_right').load('recycle-areaPage');
        });

        /*笔记列表*/
        new Vue({
            el: '#notes', //绑定
            data() { //数据
                return {
                    info: []
                }
            },
            mounted() { //直接执行
                axios.get('http://localhost:9097/notes/recycle', {
                    params: {
                        userId: sessionStorage.getItem("accessToken"),
                        token: sessionStorage.getItem("accessToken")
                    }
                }).then(response => (this.info = response))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            methods: {
                forId: function (index) {
                    return "welcome" + index
                },
                forDivId: function (index) {
                    return "rightClick" + index
                },
                forImgId: function (index) {
                    return "imgId" + index
                },
            }
        });

        //恢复点击事件
        $('body').on('click', ".recovery", function () {
            layer.msg("已恢复一个项目", {
                icon: 1,
                area: ['80px', '70px '],
                time: 2000
            });
            var noteid = $(this).parent().parent().parent().parent().find('.noteid').text();
            $.ajax({
                url: "http://localhost:9097/notes/update",
                type: "post",
                data: {
                    noteId: noteid,
                    token: sessionStorage.getItem("accessToken")
                },
                success: function () {
                    $('.body_left').empty();
                    $('.body_left').load('recyclePage');
                }
            });

        });

        //删除点击事件
        $('body').on('click', ".delete", function () {

            var noteid = $(this).parent().parent().parent().parent().find('.noteid').text();

            layer.confirm('确定要删除吗?', {
                icon: 3,
                area: ['300px', '180px '],
                title: '删除'
            }, function (index) {
                $.ajax({
                    url: "http://localhost:9097/notes/delete",
                    type: "post",
                    data: {
                        noteId: noteid,
                        token: sessionStorage.getItem("accessToken")
                    },
                    success: function () {
                        $('.body_left').empty();
                        $('.body_left').load('recyclePage');
                    }
                });
                layer.close(index);
            })
        });
    });
</script>
</body>

</html>